<template>
  <!-- 模版：<nav-top NavI="true" Licon="more" Ricon='filter' Rtxt="筛选" title="标题" @callback="callback">
  </nav-top>-->
  <div class="nav" :style="NavI?'border-bottom:1px solid #ccc;':''">
    <div @click="callback(Licon)" class="left">
      <div :class="Licon">
        <slot :name="Licon"></slot>
      </div>
    </div>

    <div class="center">
      <slot name="title">{{title}}</slot>
    </div>

    <div @click="callback(Ricon)" class="right">
      <div :class="Ricon">
        <slot :name="Ricon">{{Rtxt}}</slot>
        <img v-if="Ricon=='filter'" src="../assets/images/icon/icon_shaixuan.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "NavTop",
    props: {
      Licon: {
        //左侧图标
        type: String,
        default() {
          return "back";
        }
      },
      title: {
        //标题
        type: String,
        default() {
          return "";
        }
      },
      Ricon: {
        //右侧图标
        type: String,
        default() {
          return "";
        }
      },
      Rtxt: {
        //右边文字
        type: String,
        default() {
          return "";
        }
      },
      NavI: false // nav栏 下划线
    },
    data() {
      return {};
    },
    methods: {
      callback(icon) {
        this.$emit("callback", icon);
      }
    },
    created() {}
  };
</script>
<style lang="less" scoped>
  .nav {
    padding: 34px 36px;
    // margin: 0 34px;
    // position: relative;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    // background: rgba(247, 248, 250, 1);
    .left {
      width: 40px;
      height: 36px;
    }

    .center {
      font-size: 36px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }
    .more {
      width: 100%;
      text-align: center;
      height: 100%;
      background: url("../assets/images/icon/icon_shouye_gengduo.png") no-repeat;
      background-size: 100%;
    }
    .back {
      width: 22px;
      height: 36px;
      text-align: center;

      background: url("../assets/images/icon/ic_arrow_back.png") no-repeat;
      background-size: 100%;
    }
    .cencel {
      width: 30px;
      height: 30px;
      text-align: center;
      background: url("../assets/images/icon/ico_close.png") no-repeat;
      background-size: 100%;
    }
    .search {
      height: 34px;
      width: 34px;
      text-align: center;
      background: url("../assets/images/icon/icon_sousuo.png") no-repeat;
      background-size: 100%;
    }
    .filter {
      // width: 29px;
      height: 32px;
      font-size: 32px;
      text-align: center;
      color: rgba(20, 200, 255, 1);
      // background: url("../assets/images/icon/icon_shaixuan.png") no-repeat;
      // background-size: 29px 32px;
      img {
        width: 29px;
        height: 32px;
        margin-left: 6px;
        vertical-align: bottom;
      }
    }
    .txtFind {
      color: rgba(20, 200, 255, 1);
      font-size: 30px;
    }
  }
</style>